<template>
    <el-card class="mt16">
        <!-- 添加商品按钮 -->
        <el-row>
            <el-col>
                <el-button type="primary" @click="goToAddGoods">添加商品</el-button>
            </el-col>
        </el-row>

        <!-- 商品列表 -->
        <el-table class="mt16" border :data="goodsList">
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column label="商品名称" prop="goods_name"></el-table-column>
            <el-table-column label="商品价格" prop="goods_price"></el-table-column>
            <el-table-column label="商品重量" prop="goods_weight"></el-table-column>
            <el-table-column label="创建时间">
                <template #default="scope">
                    <div>
                        {{ dateTime(scope.row.add_time) }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作"></el-table-column>
        </el-table>
    </el-card>
</template>

<script setup lang="ts">
import { getGoodsListApi } from "@/http/api";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from 'vue-router'

const router = useRouter()


onMounted(() => {
    getGoodsList()
})

//点击按钮跳转到添加商品页面
const goToAddGoods = () => {
    router.push('/addgoods')
}

const goodsListObj = reactive({
    query: '',
    pagenum: 1,
    pagesize: 10
})

const goodsList = ref([])
const goodsTotal = ref(0)
const getGoodsList = async () => {
    const res = await getGoodsListApi(goodsListObj)
    const { goods, total } = res.data;
    goodsList.value = goods
    goodsTotal.value = total;

}

</script>

<style scoped>
@import "@/assets/public.css";
</style>